<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-17 13:32:32
-->
<template>
    <div class="globe">
        <div class="globe-title">
            <span>全球榜</span>
        </div>
        <div class="globe-songlist">
            <div class="list">
                <div class="list-item" v-for="(item,index) in rankGlobe" :key="item.id">
                    <SongList :item="item"></SongList>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import SongList from '@/components/content/songlist/SongList.vue'
defineProps({
    rankGlobe: {
        type: Array,
        default: []
    }
})
</script>

<style lang="scss" scoped>
.globe {
    &-title {
        font-weight: 700;
        font-size: 20px;
    }

    .globe-songlist {
        margin-top: 20px;
        .list {
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-around;
            &-item {
                cursor: pointer;
                height: 220px;
                width: 200px;
                margin-right: 26px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>
